<template>
    <el-dialog ref="dialogform" title="巡查路线" :visible.sync="dialogVisible" width="90%" top="10px"
        :before-close="handleClose">
        <div class="mapDialog">
            <baidu-map class="map" style="height: 100%; width: 100%;" :center="center" :zoom="zoom"
                :scroll-wheel-zoom="true" map-type="BMAP_HYBRID_MAP" @ready="handler">
                <bm-marker v-for="(item, index) in polylinePath" :key="index"
                    :position="{ lng: item.lng, lat: item.lat }" :dragging="false" animation="BMAP_ANIMATION_BOUNCE"
                    :info="item.info.pointName" @click="infoWindowOpen(item, index)">
                    <bm-label :content="item.info.pointName" :label-style="labelStyle"
                        :offset="{ width: -15, height: 30 }" />
                    <bm-info-window :position="{ lng: item.lng, lat: item.lat }" :show="item.showFlag"
                        @close="infoWindowClose(item, index)" @open="infoWindowOpen(item, index)">
                        <div class="info" v-if="item.info">
                            <div class="pointName">点位名称：{{ item.info.pointName }}</div>
                            <el-image v-if="isShowImage(item.info.pictureIdStr)" class="elImage"
                                style="width: 300px; height: 150px" :src="getImageList(item.info.pictureIdStr)[0]"
                                :preview-src-list="getImageList(item.info.pictureIdStr)" fit="scale-down">
                            </el-image>
                            <div class="infoList" v-for="info, infoIndex in item.info.itemList" :key="infoIndex">
                                {{ info }}
                            </div>
                            <span class="errorText" v-show="!item.info.itemList.length">无巡塘信息</span>
                        </div>
                    </bm-info-window>
                </bm-marker>
                <bm-polyline stroke-style="dashed" stroke-color="#6ecae3" :stroke-opacity="1" :stroke-weight="4"
                    :path="polylinePath" />
                <bm-control>
                    <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 999999 }">
                        <el-input v-model="keyword" type="text" placeholder="请输入地名关键字"
                            style="width: 300px;padding: 10px;" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </bm-auto-complete>
                </bm-control>
                <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false" />
            </baidu-map>
        </div>
        <div class="pondInfoList">
            <div class="pondInfo" v-for="(item, index) in polylinePath" :key="index">
                <div class="label" @click="infoWindowOpen(item, index)"><span><i
                            class="el-icon-location-outline"></i>点位名称：{{ item.info.pointName }}</span><span class="more"
                        @click="moreInfo(item.info)">详情</span></div>
                <div class="imageBox" v-if="isShowImage(item.info.pictureIdStr)">
                    <el-image class="elImage" style="width: 100%; height: 150px"
                        :src="getImageList(item.info.pictureIdStr)[0]"
                        :preview-src-list="getImageList(item.info.pictureIdStr)" fit="scale-down">
                    </el-image>
                </div>
                <div v-else class="imageBox el-icon-picture-outline"></div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import historicalPondPatrolRecords from '@/api/production-management/historical-pond-patrol-records.js';
export default {
    components: {},
    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
    },
    data() {
        return {
            show: false,
            ruleForm: {},
            keyword: '',
            polylinePath: [],
            infoWindowInfo: {},
            center: { lng: 120.230648, lat: 30.811543 },
            mapModule: null,
            BMapModule: null,
            zoom: 19,
            infoWindow: null,
            mapInstance: null,
            labelStyle: {
                color: "#fffff0",
                fontSize: "12px",
                borderRadius: "8px",
                border: "none",
                backgroundColor: "#00a1c2",
                padding: "3px 15px",
                opacity: ".8"
            },
        }
    },
    computed: {
        polylinePath() {
            return this.polylinePath = this.polylinePath.map(item => {
                return {
                    ...item,
                    showFlag: false
                }
            })
        }
    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },

    mounted() { },
    methods: {
        handler({ BMap, map }) {
            this.mapModule = map;
            this.BMapModule = BMap;
        },
        initData() {
            this.ruleForm = { ...this.data };
            this.queryResultDetail(this.data.resultId)
        },
        // 点击点坐标赋值
        lookDetail(marker, index) {
            this.$set(this.polylinePath, index, {
                ...marker,
                showFlag: true
            })
        },
        isShowImage(str) {
            return !!str
        },
        moreInfo(info) {
            const h = this.$createElement;
            let msgList = info.itemList.map(msg => {
                return h('div', null, msg)
            })
            if (msgList.length == 0) msgList = [h('div', null, '无巡塘信息')];
            this.$msgbox({
                title: info.pointName || '巡塘信息',
                message: h('div', null, msgList),
                showCancelButton: true,
                showConfirmButton: false,
                cancelButtonText: '取消',
            })
        },
        getImageList(pictureIdStr) {
            if (pictureIdStr) {
                let pictureIdList = pictureIdStr.split(',');
                let pictureList = pictureIdList.map(id => {
                    return `${this.$baseurl.fileServiceUrl}base/files/preview?fileId=${id}`
                })
                return pictureList
            } else {
                return []
            }
        },
        // 关闭弹窗
        infoWindowClose(marker, index) {
            this.$set(this.polylinePath, index, {
                ...marker,
                showFlag: false
            })
        },
        // 打开弹窗
        infoWindowOpen(marker, index) {
            let point = new this.BMapModule.Point(marker.lng, marker.lat)
            // this.mapModule.panTo(point)//鬼畜
            this.mapModule.centerAndZoom(point, 19);
            this.center = { lng: marker.lng, lat: marker.lat };
            console.log(this.center, marker)
            this.$set(this.polylinePath, index, {
                ...marker,
                showFlag: true
            })
        },

        queryResultDetail(id) {
            this.polylinePath = [];
            historicalPondPatrolRecords.queryResultDetail(id).then(res => {
                console.log(res)
                let { data } = res;
                data.forEach(item => {
                    let obj = {};
                    let latLng = this.AMapToBMap(item.longitude, item.latitude)
                    console.log(item.longitude, item.latitude, latLng)
                    obj["lat"] = latLng.lat;
                    obj["lng"] = latLng.lng;
                    obj["info"] = item;
                    this.polylinePath.push(obj);
                });
                // data.forEach(item => {
                //     let obj = {};
                //     obj["lat"] = item.latitude;
                //     obj["lng"] = item.longitude;
                //     obj["info"] = item;
                //     this.polylinePath.push(obj);
                // });
                if(this.polylinePath.length>0){
                    this.center = { lng: this.polylinePath[0].lng, lat: this.polylinePath[0].lat }
                }
                this.zoom = 19
            }).catch(err => {
                console.log(err)
            })
        },
        //高德坐标转换百度坐标
        AMapToBMap(gg_lng, gg_lat) {
            var X_PI = Math.PI * 3000.0 / 180.0;
            var x = gg_lng, y = gg_lat;
            var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
            var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
            var bd_lng = z * Math.cos(theta) + 0.0065;
            var bd_lat = z * Math.sin(theta) + 0.006;
            return {
                lat: bd_lat,
                lng: bd_lng
            }
        },
        //重置
        resetForm() {
            this.keyword = '';
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },

        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.pondInfoList {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    height: 205px;
    margin-bottom: 5px;
    overflow-x: auto;
    flex-wrap: nowrap;

    .pondInfo {
        flex: 0 0 400px;
        width: 400px;
        background-color: #f3f3f3;
        margin: 5px;
        margin-top: 0;
        padding: 10px;
        border: 1px solid #e4e4e4;
        cursor: pointer;

        .label {
            line-height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .more {
            color: rgb(0, 170, 255);
            cursor: pointer;
        }

        .imageBox {
            width: 100%;
            height: calc(100% - 30px);
            background-color: #e5e5e5;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 26px;
            color: #bdbdbd;
            border: 1px solid #e0e0e0;
        }
    }
}

::v-deep .el-dialog__body {
    padding-bottom: 10px;
    padding-top: 20px;
}

.mapDialog {
    width: 100%;
    height: calc(100vh - 410px);
    margin-bottom: 10px;

    .info {
        width: 300px;

        .elImage {
            background-color: #e9e9e9;
        }

        .infoList {
            text-align: left;
        }

        .pointName {
            line-height: 30px;
        }
    }
}
</style>